<template>
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        ref="dtTable"
        class="account-table"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
        @searchChange="handleQuery"
        @searchReset="handleReset"
      >
        <template #videoSlot="{param}">
          <div class="img-box" :style="{backgroundImage: `url(${param.cover})`}">
            <i class="el-icon-video-play"></i>
          </div>
        </template>
      </dt-table>
    </div>
    <uploadVideo ref="uploadVideo" :typeList="typeList" @success="refresh" />
  </div>
</template>

<script>
import uploadVideo from './components/uploadVideo'
import { getMenuListByType, getPage } from '@/api/classroom/videoReview'
import { del, editIsTop } from '@/api/classroom/learnVideoManage'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'LearnVideoManage',
  components: { uploadVideo },
  data() {
    return {
      loading: false,
      total: 0,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        videoName: ''
      },
      tableOpts: {
        rowKey: 'id',
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        toolbarBtn: [{
          label: '新增',
          permission: ['LEARN_VIDEO_MANAGE_ADD_BUTTON'],
          type: 'primary',
          icon: 'el-icon-plus',
          click: () => {
            this.handleAdd()
          }
        }],
        tableCol: [
          {
            prop: 'videoUrl',
            label: '视频',
            show: true,
            slotName: 'videoSlot',
            type: 'image',
            width: 240
          },
          {
            prop: 'videoName',
            label: '视频名称',
            show: true,
            search: true
          },
          {
            prop: 'menuId',
            label: '菜单',
            show: true,
            formatter: (row) => {
              const id = row.menuId
              const menu = this.menuList.find((menu) => menu.value == id)
              return menu && menu.label
            }
          },
          {
            prop: 'createUserName',
            label: '上传人',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          },
          {
            prop: 'isTop',
            label: '置顶',
            show: true,
            formatter: (row) => {
              return row.isTop == 'N' ? '未置顶' : '已置顶'
            }
          }
        ],
        operator: {
          width: 300,
          operatorBtn: [
            {
              text: '详情',
              size: 'mini',
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            },
            {
              text: '编辑',
              permission: ['LEARN_VIDEO_MANAGE_EDIT_BUTTON'],
              size: 'mini',
              click: (row, col, cellValue) => { return this.edit(row) }
            },
            {
              text: '删除',
              permission: ['LEARN_VIDEO_MANAGE_DEL_BUTTON'],
              size: 'mini',
              type: 'danger',
              click: (row, col, cellValue) => { return this.remove(row) }
            },
            {
              text: '置顶',
              // permission: ['LEARN_VIDEO_MANAGE_DEL_BUTTON'],
              size: 'mini',
              click: (row, col, cellValue) => { return this.setTop(row) },
              textChange: (row) => {
                return row.isTop == 'N' ? '置顶' : '取消置顶'
              }
            }
          ]
        }
      },
      typeList: []
    }
  },
  computed: {
    menuList() {
      return this.typeList.map((item) => {
        return {
          label: item.menuName,
          value: item.id
        }
      })
    }
  },
  mounted() {
    getMenuListByType().then((res) => {
      this.typeList = res.data
    })
    this.refresh()
  },
  methods: {
    handleAdd() {
      this.$refs.uploadVideo.add()
    },
    edit(row) {
      this.$refs.uploadVideo.edit(row)
    },
    remove(row) {
      this.$dtModal.confirm('请确认是否删除? ').then(() => {
        del({ id: row.id, ids: [row.id] }).then((res) => {
          this.$message.success(res.message)
          this.refresh()
        })
      })
    },
    setTop(row) {
      this.$dtModal.confirm('请确认是否要置顶该课程视频? ').then(() => {
        editIsTop({
          id: row.id,
          isTop: row.isTop == 'N' ? 'Y' : 'N'
        }).then((res) => {
          this.$message.success(res.message)
          this.refresh()
        })
      })
    },
    viewInfo(row) {
      this.$refs.uploadVideo.view(row)
    },
    refresh() {
      this.getList()
    },
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      this.filterForm.pageNo = 1
      this.getList()
    },
    handleReset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 10,
        videoName: ''
      }
      this.handleQuery()
    },
    getList() {
      this.loading = true
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows.map((item) => {
          item.cover = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${item.coverId}`
          // item.videoUrl = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${item.fileId}`
          return item
        })
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-box {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%);
    color: #fff;
    font-size: 28px;
  }
}
</style>
